import React, { useState, useEffect, useMemo } from 'react';
import { Input, List, Typography, Card, Divider } from 'antd';
import './index.css'; // 我们稍后会添加一些 CSS

const { Search } = Input;
const { Text } = Typography;

// 定义历史记录的数据结构
interface HistoryRecord {
  id: string | number; // 唯一ID，用于列表渲染的 key
  text: string; // 历史记录的主要文本内容
  date: string; // 用于分组的日期字符串 (例如: "今天", "昨天", "YYYY-MM-DD")
  workspace: string; // 工作区标识
  // 如果需要更精确的排序，可以添加时间戳
  timestamp?: number; // 例如: Date.now()
}

// 示例数据，模拟从后端获取或本地存储加载
const initialHistoryRecords = [
    { id: 1, text: '帮我解析一下这个文档', date: '今天', workspace: '默认工作区' },
    { id: 2, text: '帮我总结下这些文档的信息数据，梳理成表格', date: '昨天', workspace: '默认工作区' },
    { id: 3, text: '帮我总结下这些文档的文案内容，生成一篇概述文章', date: '昨天', workspace: '默认工作区' },
    { id: 4, text: '帮我解析一下这个文档，分析数据', date: '2025-03-27', workspace: '默认工作区' },
    { id: 5, text: '如何使用 React Hooks', date: '2025-03-27', workspace: '学习工作区' },
    { id: 6, text: 'Vite 配置详解', date: '今天', workspace: '开发工作区' },
];

function HistoryRecordPage() {
    // 存储从数据源获取的完整历史记录列表
    const [allRecords, setAllRecords] = useState([]);
    // 存储搜索输入框的关键词
    const [searchTerm, setSearchTerm] = useState('');
    // 加载状态
    const [loading, setLoading] = useState(true);

    // 在组件挂载时加载历史记录数据
    useEffect(() => {
        // 模拟异步加载数据
        const fetchRecords = async () => {
            setLoading(true);
            // 实际应用中这里是 API 调用或其他数据加载逻辑
            // const response = await fetch('/api/history');
            // const data = await response.json();
            await new Promise(resolve => setTimeout(resolve, 500)); // 模拟网络延迟
            setAllRecords(initialHistoryRecords); // 使用示例数据
            setLoading(false);
        };

        fetchRecords();
    }, []); // 空依赖数组表示只在组件第一次渲染后运行

    // 使用 useMemo 过滤和分组历史记录
    const filteredAndGroupedRecords = useMemo(() => {
        let filtered = allRecords;

        // 1. 根据搜索关键词进行模糊过滤
        if (searchTerm) {
            const lowerCaseSearchTerm = searchTerm.toLowerCase();
            filtered = allRecords.filter(record =>
                record.text.toLowerCase().includes(lowerCaseSearchTerm)
            );
        }

        // 2. 按日期进行分组
        const grouped: { [key: string]: HistoryRecord[] } = {};
        filtered.forEach(record => {
            if (!grouped[record.date]) {
                grouped[record.date] = [];
            }
            grouped[record.date].push(record);
        });

        // 3. （可选）按日期键进行排序，如果日期是 "今天", "昨天", "YYYY-MM-DD" 这种混合格式，
        //    可能需要一个自定义排序函数，或者在数据源中包含时间戳并按时间戳排序。
        //    这里为了简化，我们假设示例数据的顺序就是期望的显示顺序。
        //    如果需要按日期字符串排序，可以获取 Object.keys(grouped) 然后排序。

        return grouped;
    }, [allRecords, searchTerm]); // 依赖项：allRecords 和 searchTerm

    // 处理搜索输入框变化的函数 (实时过滤)
    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setSearchTerm(e.target.value);
    };

    // 处理搜索按钮点击或回车 (如果需要)
    // const handleSearch = (value: string) => {
    //    console.log('最终搜索关键词:', value);
    //    // 如果 onChange 已经实时更新了，这里可以不做额外处理
    // };


    return (
        <div className="history-record-page">
            <h1 className="page-title">历史记录</h1>

            {/* 搜索输入框区域 */}
            <div className="search-area">
                <Search
                    placeholder="文档 |" // 占位符文本
                    allowClear // 允许清除输入
                    size="large" // 尺寸较大
                    value={searchTerm} // 输入框的值绑定到 searchTerm 状态
                    onChange={handleSearchChange} // 输入变化时实时更新 searchTerm
                    // onSearch={handleSearch} // 如果需要，可以启用搜索按钮事件
                    className="search-input"
                />
            </div>

            {/* 历史记录列表区域 */}
            <div className="records-list-area">
                {loading ? (
                    <p>加载中...</p>
                ) : (
                     // 遍历分组后的历史记录
                    Object.keys(filteredAndGroupedRecords).map(date => (
                        <div key={date} className="date-group">
                            {/* 日期分组头部 */}
                            <Divider orientation="left" plain>
                                {date}
                            </Divider>
                            {/* 该日期下的历史记录列表 */}
                            <List
                                itemLayout="horizontal"
                                dataSource={filteredAndGroupedRecords[date]} // 使用当前日期分组的数据源
                                renderItem={record => (
                                    // 渲染每一个历史记录条目
                                    // 添加一个类名方便 CSS 样式控制
                                    <List.Item className="record-item">
                                         {/* 使用 Card 或简单 div 来包裹内容 */}
                                         {/* 这里使用 div 模拟设计稿的简洁样式 */}
                                        <div className="record-content">
                                            {/* 历史记录文本，点击可交互 */}
                                            <Text className="record-text">{record.text}</Text>
                                            {/* 工作区标识，右对齐 */}
                                            <span className="workspace-label">
                                                {record.workspace}
                                            </span>
                                        </div>
                                    </List.Item>
                                )}
                                // 如果当前分组没有记录，可以不显示这个 List 组件
                                // 或者 List 本身会处理空数据源的情况
                            />
                        </div>
                    ))
                )}

                 {/* 处理整个过滤后结果为空的情况 */}
                 {!loading && Object.keys(filteredAndGroupedRecords).length === 0 && (
                     <div style={{ textAlign: 'center', marginTop: '20px', color: '#999' }}>
                         {searchTerm ? '没有找到匹配的历史记录' : '暂无历史记录'}
                     </div>
                 )}
            </div>
        </div>
    );
}

export default HistoryRecordPage; 